<template>
  <div id="refund">
    <el-card class="query">
      <el-form class="pageQuery" label-position="top">
        <div class="queryItem" v-for="(f, index) in list.search_field" :key="index">
          <el-form-item :label="f.title">
            <el-input v-if="f.type == 'input'" :placeholder="f.placeholder" v-model="list.search[f.key]"></el-input>

            <el-select v-if="f.type == 'select'" :placeholder="f.placeholder" v-model="list.search[f.key]">
              <el-option v-for="(item, index) in  option[f.dic]" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>

            <el-date-picker v-if="f.type == 'date'" :unlink-panels="true" v-model="dateValue"
              type="daterange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" @change="optionDate"></el-date-picker>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button :disabled="download.disabled"><download-excel :fetch="downExcel" :fields="download.header" :name="download.file_name">{{download.text}}</download-excel></el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <el-table :data="list.items">
        <el-table-column v-for="(field, index) in list.list_field" :key="index" :label="field.title" :prop="field.key">
          <template slot-scope="{row}">
            <div v-html="$api.status.status(row.status, option[$api.Enum.DicTypeStatus])" v-if="field.key == 'status'"></div>
            <div v-else>{{row[field.key]}}</div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="操作" fixed="right" class="table-operation" :show-overflow-tooltip="false">
          <template slot-scope="{row}">
            <div class="table-operation">
              <el-button v-if="$api.buttonPower(79)" type="text" @click="detailBox(row)">详情</el-button>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>
    </el-card>

    <el-drawer :visible.sync="detail_box.show" title="退款详情" size="50%">
      <div class="detailDialog">
        <el-descriptions :column="2" :colon="false" label-class-name="dialogLabel">
          <el-descriptions-item v-for="(field, index) in detail_box.fields" :key="index" :label="field.title">{{detail_box.detail[field.key] }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
    <myPaging :queryInfo="list.search" :getListData="getList"></myPaging>
  </div>
</template>

<script>
export default {
  name: "WuliankaRefund",
  data() {
    return {
      option: [],
      dateValue: [],
      list:{
        search_field: [
          {
            type: 'input',
            key: 'refund_sn',
            placeholder: '请输入退款单号',
            title: '退款单号',
            dic: ''
          },
          {
            type: 'input',
            key: 'source_order_sn',
            placeholder: '请输入来源订单号',
            title: '来源订单号',
            dic: ''
          },
          {
            type: 'select',
            key: 'agent_app_id',
            placeholder: '请选择应用商',
            title: '应用商',
            dic: this.$api.Enum.DicTypeResellerList
          },
          {
            type: 'select',
            key: 'agent_agency_id',
            placeholder: '请选择代理商',
            title: '代理商',
            dic: this.$api.Enum.DicTypeResellerList
          },
          {
            type: 'select',
            key: 'agent_retailer_id',
            placeholder: '请选择零售商',
            title: '零售商',
            dic: this.$api.Enum.DicTypeResellerList
          },
          {
            type: 'date',
            key: 'date',
            placeholder: '',
            title: '创建时间',
            dic: ''
          },
        ],
        list_field: [
          {
            title: '退款单号',
            key: 'refund_sn'
          },
          {
            title: '来源订单号',
            key: 'source_order_sn'
          },
          {
            title: '备注说明',
            key: 'remark'
          },
          {
            title: '实退金额',
            key: 'pay_amount'
          },
          {
            title: '创建时间',
            key: 'create_dt'
          },
          {
            title: '接受用户',
            key: 'accept_user_name'
          },
          {
            title: '应用商',
            key: 'agent_app_name'
          },
          {
            title: '代理商',
            key: 'agent_agency_name'
          },
          {
            title: '零售商',
            key: 'agent_retailer_name'
          },
          {
            title: '状态',
            key: 'status_name'
          },
        ],
        search: {
          page: 1,
          size: 10,
          total: 0,
        },
        items:[]
      },
      detail_box:{
        show:false,
        detail:{},
        fields:[
          {
            title: '接受用户',
            key: 'accept_user_name'
          },
          {
            title: '应用商',
            key: 'agent_app_name'
          },
          {
            title: '代理商',
            key: 'agent_agency_name'
          },
          {
            title: '零售商',
            key: 'agent_retailer_name'
          },
          {
            title: '创建时间',
            key: 'create_dt'
          },
          {
            title: '执行时间',
            key: 'exec_dt'
          },
          {
            title: '实退金额',
            key: 'pay_amount'
          },
          {
            title: '退款比例',
            key: 'refund_ratio_name'
          },
          {
            title: '退款单号',
            key: 'refund_sn'
          },
          {
            title: '来源订单号',
            key: 'source_order_sn'
          },
          {
            title: '来源完成时间',
            key: 'source_finish_dt'
          },
          {
            title: '备注说明',
            key: 'remark'
          },
          {
            title: '状态',
            key: 'status_name'
          },
        ],
      },
      download: {
        text: '导出',
        file_name: '退款导出.xls',
        disabled: false,
        header: {},
        search: {},
        items: [],
      },
    };
  },

  mounted() {
    this.$api.forbidHeader(this.list.search_field, this.list.list_field, this.detail_box.fields)
    this.$api.foundation.dicListExtendCache([this.$api.Enum.DicTypeResellerList], {}, res => {
      this.option = res;
    });
    this.getList();
  },

  methods: {
    getList() {
      this.$api.order.refundList(this.list.search, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.list.items = res.data.list;
        this.list.search.total = res.data.page.total;
      });
    },
    detailBox(row) {
      this.detail_box.detail = {}
      this.detail_box.show = true
      this.$api.order.refundDetail({ id: row.id, source_order_id: row.source_order_id }, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.detail_box.detail = res.data;
      });
    },
    optionDate(dateArr) {
      if (dateArr) {
        this.list.search.create_start_dt = dateArr[0];
        this.list.search.create_end_dt = dateArr[1];
      } else {
        this.list.search.create_start_dt = ''
        this.list.search.create_end_dt = ''
      }
    },
    async downExcel() {
      if (this.download.disabled){
        return false
      }
      this.download.disabled = true
      this.download.text = '数据导出中,请稍等.'
      Object.assign(this.download.search, this.list.search)
      this.download.header = {}
      this.download.items = []
      this.download.search.size = 500
      this.download.search.page = 1
      this.list.list_field.forEach(item =>{
        this.download.header[item.title] = item.key
      })
      this.getDownExcelData()
      this.download.disabled = false
      this.download.text = '导出'
      return this.download.items
    },
    getDownExcelData() {
      this.$api.order.refundList(this.download.search, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.download.items.push(... res.data.list)
        if ((this.download.search.total - this.download.search.page * this.download.search.size) < 0 || res.data.page.total < this.download.search.size) {

        } else {
          this.download.search.page += 1
          this.download.search.total = res.data.page.total;
          this.getDownExcelData()
        }
      },{async:false})
    },
  }
};
</script>

<style lang="less" >
#refund {
  .label {
    width: 100px;
    text-align-last: justify;
    display: inline-block;
    font-weight: bold;
  }
}
</style>
<style lang="less" scoped>
.detailDialog {
  padding: 0 20px;
}
</style>